<html>
  <head>
    <title></title>
    <style>
    
      svg { background:gold; display:block; }
    
      svg path {
        stroke: #000;
        stroke-dasharray: 960dip;
        stroke-dashoffset: 960dip;
      }    
      svg:hover path {
        stroke: #f00;
        stroke-dashoffset: 10dip;
        transition: stroke-dashoffset(linear,5s) stroke(linear,5s); 
      }    
    
    </style>
    <script type="text/tiscript"></script>
  </head>
<body>

Hover this:

<svg x="0px" y="0px" width="340px" height="333px" viewBox="0 0 340 333">
  <path fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
    s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
    C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>


</body>
</html>
